<div class="login">
	<div class="warp">
		<div class="top">
			<div class="head">
				<span class="title">{{settings.app.name}}</span>
			</div>
			<div class="desc">{{settings.app.description}}</div>
		</div>
		<div class="content">
			<form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
				<nz-form-item>
					<nz-form-control>
						<nz-input-group nzSize="large" nzPrefixIcon="anticon anticon-user">
							<input nz-input formControlName="account" [placeholder]="'login.text.account' | translate">
						</nz-input-group>
						<nz-form-explain *ngIf="getFormControl('account').dirty && getFormControl('account').errors">{{ 'login.text.account_message' | translate }}</nz-form-explain>
					</nz-form-control>
				</nz-form-item>
				<nz-form-item>
					<nz-form-control>
						<nz-input-group nzSize="large" nzPrefixIcon="anticon anticon-lock">
							<input nz-input formControlName="password" type="password" [placeholder]="'login.text.password' | translate">
						</nz-input-group>
						<nz-form-explain *ngIf="getFormControl('password').dirty && getFormControl('password').errors">{{ 'login.text.password_message' | translate }}</nz-form-explain>
					</nz-form-control>
				</nz-form-item>
				<nz-form-item>
					<nz-col [nzSpan]="16">
						<nz-form-control>
							<input nz-input formControlName="verify" [nzSize]="'large'" [placeholder]="'login.text.verify' | translate">
							<nz-form-explain *ngIf="getFormControl('verify').dirty && getFormControl('verify').errors">{{ 'login.text.verify_message' | translate }}</nz-form-explain>
						</nz-form-control>
					</nz-col>
					<nz-col [nzSpan]="8" class="verify-content text-right">
						<nz-spin [nzSpinning]="loadingVerify">
							<img *ngIf="verify; else elseBlock" class="verify" [src]="verify" [title]="'login.text.verify_tip' | translate" (click)="refreshVerify()" />
							<ng-template #elseBlock>
								<a class="reload" (click)="refreshVerify()">{{ 'login.text.verify_tip' | translate }}</a>
							</ng-template>
						</nz-spin>
					</nz-col>
				</nz-form-item>
				<nz-form-item>
					<nz-col [nzSpan]="12">
						<label nz-checkbox formControlName="remember">
							{{ 'login.text.rember' | translate }}
						</label>
					</nz-col>
					<nz-col [nzSpan]="12" class="text-right">
						<a class="forgot" (click)="forgotPassword()">{{ 'login.text.forget' | translate }}</a>
					</nz-col>
				</nz-form-item>
				<nz-form-item>
					<button nz-button class="btn-block" [nzType]="'primary'" [nzSize]="'large'" [nzLoading]="!isCheck" [disabled]="!validateForm.valid">{{ 'login.text.login' | translate }}</button>
				</nz-form-item>
				<nz-form-item class="text-right language" *ngIf="i18n">
					<a [class.a-selected]="item.code === settings.layout.lang" *ngFor="let item of langs" (click)="switchLanguage(item.code)">{{item.text}}</a>
				</nz-form-item>
			</form>
		</div>
	</div>
</div>
